<template>
	<view>
		<view class="header">
			<i class="ri-function-fill" style="color: #7800BE;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#7800BE" name="function-fill"></i-icon> -->
			控制台
			<i class="ri-arrow-right-s-line" style="color: #666;font-size:14px;"></i>
			<!-- <i-icon size="20upx" color="#666" name="arrow-right-s-line"></i-icon> -->
			企业电子账户
		</view>
		<view class="bl">
			<view class="h1">
				<i class="ri-computer-line" style="color: #999;font-size:24px;"></i>
				<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
				电子账户
			</view>
		</view>
		<view v-if="openState == 1">
			<!-- 未开户页面 -->
			<view style="text-align: center;margin-top: 8%;">
				<i class="ri-shield-keyhole-line" style="color: #7800BE;font-size:100px;"></i>
				<!-- <i-icon size="200upx" color="#7800BE" name="shield-keyhole-line"></i-icon> -->
				<view style="font-size: 30px;margin: 0px 30px 30px 30px;">{{stateInfo}}</view>
				<view class="bz">
					<button style="width: 160px;text-align: center;" @click="rodeOpen()">
						<i class="ri-shield-keyhole-line" style="color: #fff;font-size:14px;"></i>
						<!-- <i-icon size="20upx" color="#fff" name="shield-keyhole-line"></i-icon> -->
						开通电子账户
					</button>
				</view>
			</view>
		</view>
		<view v-else-if="openState == 2">
			<!-- 开户成功页面 -->
			<view class="qbbg">
				<image src="../../static/zbyh.png" style="height: 85px;padding: 30px 60px 20px 60px;"></image>
				<view style="margin: 20px 0px 20px 100px;">
					<view class="bk b10" style="font-size: 30px;">
						{{openData.corpName}}
					</view>
					<view style="font-size: 30px;color: #7800BE;margin-top: 10px;">
						{{openData.virtualAccNo}}
					</view>
				</view>
				<view class="bc" style="margin: 0px 0px 0px 100px;padding-bottom: 40px;">
					<view class="bk b10 r30">
						当前余额：￥{{openData.bal}}
					</view>
					<button @click="tixian()">提现</button>
				</view>
			</view>
			<view class="bl">
				<view class="h1">
					<i class="ri-computer-line" style="color: #999;font-size:24px;"></i>
					<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
					基本信息
				</view>
			</view>
			<view class="qbbg">
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">ID</view>
					<view>{{openData.id}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">公司名称</view>
					<view>{{openData.corpName}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">法人</view>
					<view>{{openData.legalPerName}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">企业地址</view>
					<view>{{openData.address}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">统一社会信用代码</view>
					<view>{{openData.busLicNo}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户时间</view>
					<view>{{openData.openTime}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户许可证核准号</view>
					<view>{{openData.openLicCertNo}}</view>
				</view>
			</view>
			<view class="bl">
				<view class="h1">
					<i class="ri-computer-line" style="color: #999;font-size:24px;"></i>
					<!-- <i-icon size="30upx" color="#999" name="computer-line"></i-icon> -->
					绑定银行
				</view>
			</view>
			<view class="qbbg">
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户行</view>
					<view>{{openData.bankName}}</view>
				</view>
				<view class="bc" style="height: 80px;line-height: 80px;margin-left: 100px;">
					<view class="bk" style="width:150px;">开户名称</view>
					<view class="r30">{{openData.corpName}}</view><button @click="bankState = 1">修改信息</button>
				</view>
			</view>
		</view>
		<view v-else-if="openState == 3">
			<!-- 审核状态 -->
			<view></view>
			开户状态：{{stateInfo}}
			<button @click="rodeOpen()">重新提交</button>
		</view>
		<view v-else-if="openState == 4">
			<!-- 失败状态 -->
			<view></view>
			开户状态：{{stateInfo}}
			<button @click="rodeOpen()">重新提交</button>
		</view>
		<!-- 拉出右边银行列表  -->
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view v-for="item in array" :key="item" @click="getBankname(item)">{{ item }}</view>
			</scroll-view>
		</uni-drawer>
		<!-- 拉出右边搜索出的支行列表  -->
		<uni-drawer ref="showLeft" mode="right" :mask-click="true">
			<scroll-view style="height: 100%; width: 500rpx;" scroll-y="true">
				<view v-for="item in showArray" :key="item" @click="getBankBranch(item)" style="width: 500rpx;">
					{{ item }}
				</view>
			</scroll-view>
		</uni-drawer>
		<view v-if="bankState == 1" class="p-tkb">
			<view class="p-tkh"></view>
			<view class="p-tk">
				<view class="tb">
					<view class="titem">
						<i class="ri-add-circle-fill" style="color: #7800BE;font-size:20px;"></i>
						<!-- <i-icon size="20upx" color="#7800BE" name="add-circle-fill" class="r10"></i-icon> -->
						修改银行卡信息
					</view>
					<i class="ri-close-circle-fill" style="color: #f73164;font-size:20px;" @click="bankState=false"></i>
					<!-- <i-icon size="25upx" color="#f73164" name="close-circle-fill" @click="bankState=false"></i-icon> -->
				</view>
				<view class="com">
					<view>
						<view>选择银行</view>
						<input type="text" v-model="alter.bankName" placeholder="开户行" @click="showDrawer" />
					</view>
					<view>
						<view>银行地址</view>
						<view>
							<picker class="" mode="multiSelector" :range="region" range-key="name" :value="regionIndex"
								@change="pickerChange" @columnchange="pickerColumnchange">
								<view class="bc">
									<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}"
										v-if="regionStr != '请选择省市区'">
										<view>{{alter.provinceName}}{{alter.cityName}}</view>
									</view>
									<view v-else>
										<select>
											<option>{{regionStr}}</option>
										</select>
									</view>
								</view>
							</picker>
						</view>
					</view>
					<view>
						<view>开户支行</view>
						<view>
							<input type="text" v-model="alter.bankBranch" placeholder="输入支行关键字进行搜索" /><button
								@click="seek()">搜索</button>
						</view>
					</view>
					<view>
						<view>银行卡号</view>
						<view><input type="number" v-model="alter.acctNo" placeholder="输入银行卡卡号"></view>
					</view>
					<button @click="alterInfo()">修改</button>
				</view>
			</view>
		</view>

		<view style="height: 60px;">
		</view>
	</view>
	</view>
</template>

<script>
	import region from '../../components/k-region/pca-code.json';
	export default {
		data() {
			return {
				bankState: false,
				openState: 0,
				corpName: '',
				id: '',
				bal: '',
				alter: {
					bankName: '', //银行名称
					bankBranch: '', //支行名称
					acctNo: '', //银行卡号
					cityName: '', //银行市名
					provinceName: '', //银行省名
					relBankNo: '', //联行号
				},
				stateInfo: '您未开通电子账户',
				openData: {
					corpName: '广西测试计算有限责任公司',
					bal: '5000000000',
					account: '68003911399660010002'
				},
				BankArray: [], //支行原数据
				showArray: [], //支行显示数据
				array: ["﻿中国工商银行", "中国农业银行", "中国银行", "中国邮政储蓄银行", "中国建设银行", "国家开发银行", "中国进出口银行", "中国农业发展银行", "交通银行", "中信银行",
					"中国光大银行银行", "华夏银行",
					"中国民生银行", "广发银行", "平安银行", "招商银行", "兴业银行", "桂林银行", "广西北部湾银行", "上海浦东发展银行", "北京银行", "天津银行", "河北银行",
					"唐山银行股份", "秦皇岛银行股",
					"邯郸银行", "邢台银行", "保定银行", "张家口银行", "承德银行", "沧州银行", "廊坊银行", "衡水银行", "晋商银行", "大同银行", "阳泉市商业银行", "长治银行",
					"晋城银行", "晋中银行", "内蒙古银行", "包商银行", "乌海银行", "盛京银行", "鄂尔多斯银行", "大连银行", "鞍山银行", "抚顺银行", "本溪市商业银行",
					"丹东银行", "锦州银行", "葫芦岛银行", "营口银行", "营口沿海银行", "阜新银行", "辽阳银行", "盘锦银行", "铁岭银行", "朝阳银行", "吉林银行", "哈尔滨银行",
					"龙江银行", "南京银行", "江苏银行", "苏州银行", "江苏长江商业银行", "杭州银行", "宁波东海银行", "宁波银行", "宁波通商银行", "温州银行", "嘉兴银行",
					"湖州银行", "绍兴银行", "金华银行", "浙江稠州商业银行", "台州银行", "浙江泰隆商业银行", "浙江民泰商业银行", "福建海峡银行", "厦门银行", "泉州银行",
					"江西银行", "九江银行", "赣州银行", "上饶银行", "齐鲁银行", "青岛银行", "齐商银行", "枣庄银行", "东营银行", "烟台银行", "潍坊银行", "济宁银行",
					"泰安银行", "莱商银行", "威海市商业银行", "德州银行股份", "临商银行股份", "日照银行股份", "郑州银行", "中原银行", "洛阳银行", "平顶山银行股",
					"焦作中旅银行", "汉口银行", "湖北银行", "华融湘江银行", "长沙银行", "广州银行", "珠海华润银行", "广东华兴银行", "广东南粤银行", "东莞银行",
					"柳州银行", "海南银行", "成都银行", "重庆银行", "自贡银行", "攀枝花市商业银行", "泸州市商业银", "长城华西银行",
					"绵阳市商业银行", "遂宁银行股份", "乐山市商业银行", "宜宾市商业银", "四川天府银行", "达州市商业银行", "雅安市商业银行", "凉山州商业银行", "贵阳银行",
					"贵州银行", "富滇银行", "曲靖市商业银行", "云南红塔银行", "西藏银行", "西安银行", "长安银行", "兰州银行", "甘肃银行", "青海银行股份", "宁夏银行",
					"石嘴山银行", "乌鲁木齐银行", "昆仑银行", "哈密市商业银行", "库尔勒银行", "新疆汇和银行", "天津滨海农村商业银行", "大连农村商业银行", "无锡农村商业银行",
					"江苏江阴农村商业银行", "江苏江南农村商业银行", "太仓农村商业银行", "江苏昆山农村", "吴江农村商业银行", "江苏常熟农村商业银行", "张家港农村商业银行",
					"广州农村商业银行", "广东顺德农村银行", "海口联合农村银行", "成都农商银行", "重庆农村商业银行", "恒丰银行", "浙商银行", "天津农村商业银行", "渤海银行",
					"徽商银行", "重庆三峡银行", "上海农商银行", "天津金城银行", "上海华瑞银行", "浙江网商银行", "重庆富民银行", "上海银行", "北京农村商业银行",
					"河北省农村商业银行", "山西省农村商业银行", "内蒙古农村商业银行", "辽宁省农村商业银行", "吉林省农村商业银行", "黑龙江农村商业银行", "江苏省农村商业银行",
					"浙江省农村商业银行", "宁波鄞州农村商业银行", "安徽省农村商业银行", "福建省农村商业银行", "江西省农村商业银行", "山东省农村商业银行", "河南省农村商业银行",
					"湖北省农村商业银行", "武汉农村商业银行", "湖南省农村商业银行", "广东省农村信用合作联社", "深圳农村商业银行", "东莞农村商业银行", "广西省农村信用合作联社",
					"海南省农村商业银行", "四川省农村信用合作联社", "贵州省农村信用合作联社", "云南省农村信用合作联社", "陕西省农村商业银行", "甘肃省农村商业银行", "青海省农村信用合作联社",
					"宁夏省农村信用合作联社", "新疆省农村商业银行", "温州民商银行", "深圳前海微众银行", "四川新网银行", "众邦银行",
					"南阳村镇银行股份有限公司"
				],
				rData: {},
				//地区选择器字段
				oldRegion: region,
				// 处理后的数组
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],

				// 省市区字符串
				regionStr: '请选择省市区',
				// 省市区字符串
				regionStr2: '请选择省市区',
			}
		},
		onLoad() {
			this.getOpenInfo();
		},
		methods: {
			/**
			 * 搜索支行
			 */
			seek() {
				let _this = this;
				_this.showArray = []; //清空
				_this.BankArray = []; //清空
				let ZHname = _this.alter.bankName; //银行名称
				let Keyword = _this.alter.bankBranch; //关键字
				//校验数据
				if (ZHname == null || ZHname == '') {
					uni.showToast({
						title: '银行名称未选择',
						icon: 'none'
					})
					return;
				}
				if (Keyword == null || Keyword == '') {
					uni.showToast({
						title: '请输入搜索关键字',
						icon: 'none'
					})
					return;
				}
				if (Keyword == ZHname) {
					uni.showToast({
						title: '请搜索准确关键字，如：地方名、街道路名',
						icon: 'none',
						duration: 3000
					})
					return;
				}
				uni.request({
					url: _this.baseURL + "/com/my/uip?bankName=" + ZHname + "&Keyword=" + Keyword,
					header: {
						"token": uni.getStorageSync('token')
					},
					method: 'GET',
					success: function(res) {
						console.log(res)
						if (res.data.success == true) {
							let rData = res.data.data;
							_this.BankArray = rData;
							for (let item in rData) {

								_this.showArray.push(rData[item].bankBranchName)
							}
							console.log(_this.showArray)
							_this.$refs.showLeft.open();
						} else {
							_this.loading = false
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 3000
							})
						}
					},
					fail: function(err) {
						console.log(err)
						uni.showToast({
							title: err.data.message || err.message,
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			//选中支行数据
			getBankBranch(item) {
				let _this = this;
				_this.alter.bankBranch = item;
				for (let i in _this.BankArray) {
					let forName = _this.BankArray[i].bankBranchName;
					if (forName == item) {
						_this.alter.relBankNo = _this.BankArray[i].bankBranchNo;
					}
				}
				this.$refs.showLeft.close();
			},
			/**
			 * 选择银行方法
			 */
			showDrawer() {
				this.$refs.showRight.open();
			},
			closeDrawer() {
				this.$refs.showRight.close();
			},
			getBankname(item) {
				//console.log(item)
				this.alter.bankName = item;
				this.$refs.showRight.close();
			},
			/**
			 * 修改银行信息
			 */
			alterInfo() {
				console.log(this.alter)
				let _this = this;
				uni.request({
					url: _this.baseURL + "/com/qy/up/data?id=" + _this.openData.id + "&acctNo=" + _this.openData
						.acctNo,
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							_this.bankState = false;
							_this.findAccountBal();
							uni.showToast({
								title: res.data.message,
								icon: 'success',
								duration: 2500
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 2500
							})
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error',
							duration: 2500
						})
					}
				})
			},
			/**
			 * 前往提现页面
			 */
			tixian() {
				let rData = this.rData;
				uni.reLaunch({
					url: 'account-tixian?accType=qy&virtualAccName=' + rData.virtualAccName +
						'&virtualAccNo=' + rData.virtualAccNo + '&bal=' + rData.bal +
						'&bankName=' + rData.bankName + '&acctNo=' + rData.acctNo +
						'&bankAccName=' + rData.bankAccName
				})
			},
			/**
			 * 前往开户页面
			 */
			rodeOpen() {
				uni.reLaunch({
					url: 'account-qy-add'
				})
			},
			/**
			 * 查询该token是否有添加过开户信息
			 */
			getOpenInfo() {
				let _this = this;
				let token = uni.getStorageSync('token');
				if (token == null) {
					uni.showToast({
						title: '用户未登录'
					})
					return;
				}
				uni.request({
					url: this.baseURL + '/com/find/open',
					method: "POST",
					header: {
						'token': token
					},
					success(res) {
						console.log(res)
						if (res.data.success == true) {
							let rData = res.data.data;
							//得到查询开户状态参数
							_this.corpName = rData.corpName;
							_this.id = rData.id;
							_this.stateInfo = rData.state;
							_this.selectOpenState();

						} else {
							_this.openState = 1;
							console.log("未添加开户信息")
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message,
							icon: 'error'
						})
					}
				})
			},
			/**
			 * 查询开户状态
			 */
			selectOpenState() {
				let _this = this;
				uni.request({
					url: this.baseURL + '/com/open/state?corpName=' + this.corpName + '&id=' + this.id,
					method: "GET",
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						if (res.data.success == true) {
							let rCode = res.data.code;
							if (rCode == '9000' || rCode == 9000) {
								//开户成功，查询账号信息及余额
								_this.findAccountBal();
							}
							if (rCode == '9600' || rCode == 9600) {
								//审核状态
								_this.openState = 3;
							}
						} else {
							//开户失败
							uni.showToast({
								title: res.data.message,
								icon: 'error',
								duration: 3000
							})
							_this.openState = 4;
						}
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title: err.message || err.data.message,
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			/**
			 * 查询账户余额
			 */
			findAccountBal() {
				let _this = this;
				uni.request({
					url: this.baseURL + '/com/list/xq?corpName=' + this.id + '&id=' + this.corpName,
					method: "GET",
					header: {
						'token': uni.getStorageSync('token')
					},
					success(res) {
						if (res.data.success == true) {
							let rData = res.data.data;
							_this.openData = rData;
							_this.openState = 2;
							_this.rData = rData;
						}
					},
					fail(err) {
						uni.showToast({
							title: err.message,
							icon: 'error',
							duration: 3000
						})
					}
				})
			},
			/**
			 * 省市区三级联动(银行地址)
			 * @param {Object} e
			 */
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;

				this.alter.provinceName = this.region[0][this.regionIndex[0]].name; //省
				this.alter.cityName = this.region[1][this.regionIndex[1]].name; //市

				//this.qyData.address = this.region[2][this.regionIndex[2]].name;//区
				this.regionStr = this.region[0][this.regionIndex[0]].name + this.region[1][this.regionIndex[1]].name;

				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]].code,
					this.region[
						2][this.regionIndex[2]].code
				]);
			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			},
		},
		created() {
			let provinceArr = [];
			let cityArr = [];

			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code) {
					this.regionIndex[2] = index;
				}
			})
			if (this.isRevise) {
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;
				this.regionStr2 = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;
			} else {
				this.regionStr = '请选择省市区';
				this.regionStr2 = '请选择省市区';
			}
		},
	}
</script>

<style>
	.qbbg {
		background-color: #fff;
		border-radius: 10px;
		margin: 0px 60px 30px 60px;
	}
</style>
